<script setup>
import { inject, reactive, onBeforeMount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// 获取"路由器" (当前应用中只有一个，用于实现导航操作)
const router = useRouter();
// 获取"当前路由" (用于获取当前路由记录信息)
const route = useRoute();
// 注入在 App.vue 中通过 provide 提供的数据
const $http = inject('$http');

// 定义一个用来记录用户数据的变量
const userInfo = reactive({
  id: '',
  email: '',
  nickname: ''
})

// 在生命周期钩子中加载用户详情数据
onBeforeMount(()=>{
  // 通过 route.params 可以获得 路由参数
  console.log(route.params.id);
  // 获取到参数中的 id 后就可以根据 id 向后端发送查询请求
  $http.get(`/back/user/find/${route.params.id}`).then(resp=> {
    console.log('data: ', resp.data);
    
    // 解构赋值
    const { id, email, nickname } = resp.data;
    userInfo.id = id;
    userInfo.email = email;
    userInfo.nickname = nickname;
  }).catch( error => {
    console.log(error);
  });
});


// $http.get(`/back/user/find/${id}`)....
</script>

<template>
  <h5>用户详情</h5>
  <p>编号: {{ userInfo.id }}</p>
  <p>邮箱: {{ userInfo.email }}</p>
  <p>昵称: {{ userInfo.nickname }}</p>
</template>